<template>
    <div class="search">
        <div class="search-form">
            <i class="search-icon"></i>
            <div class="search-input">
                <input
                    @input.stop="showSuggest"
                    @keydown.enter="showresult"
                    v-model="keywords"
                    type="text"
                    name="search"
                    class=""
                    id="input"
                    placeholder="搜索歌曲、歌手、专辑"
                    autocomplete="off"
                />
            </div>
            <i v-show="keywords.length > 0" class="del-icon" @click.stop="delkeywords"></i>
        </div>
        <transition enter-active-class="animate__animated animate__fadeInLeft">
            <component
                :keywords="keywords"
                :is="component"
                :isplay="isplay"
                @search="search"
                @play="$emit('play', $event)"
            ></component>
        </transition>
    </div>
</template>

<script>
import SeacherHot from "../components/SeacherHot.vue";
import SearchResult from "../components/SearchResult.vue";
import SearchSuggest from "../components/SearchSuggest.vue";
export default {
    components: { SeacherHot, SearchResult, SearchSuggest },
    data() {
        return {
            component: "SeacherHot",
            keywords: "",
            isplay: true,
        };
    },
    props: {},
    methods: {
        showSuggest() {
            if (this.keywords !== "") {
                this.component = "SearchSuggest";
            } else {
                this.component = "SeacherHot";
            }
        },
        showresult() {
            this.component = "SearchResult";
        },
        search(hotword) {
            this.keywords = hotword;
            this.showresult();
        },
        delkeywords() {
            this.keywords = "";
            this.component = "SeacherHot";
        },
    },
};
</script>

<style lang="scss" scoped>
.search {
    position: relative;
    top: 40px;
    padding-bottom: 54px;
    .search-form {
        position: relative;
        padding: 15px 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        .search-icon {
            width: 13px;
            height: 13px;
            position: absolute;
            top: 22px;
            left: 14px;
            background: url(../assets/images/search_icon.png);
        }
        .del-icon {
            width: 17px;
            height: 17px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 20px;
            background: url(../assets/images/dels_icon.png) no-repeat;
            background-position: 0 0;
            background-size: cover;
        }
        .search-input {
            width: 100%;
            height: 30px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 15px;
            #input {
                width: 100%;
                height: 30px;
                line-height: 18px;
                padding: 0 10px 0 20px;
                background: transparent;
                font-size: 14px;
                color: #333;
                border: 0;
                outline-style: none;
                &::placeholder {
                    color: #c9c9c9;
                }
            }
        }
    }
}
</style>
